<script setup lang="ts">

</script>

<template>
  <section class="403 noAuthentication h-screen">
    <h2 class="fixed text-[50vw] w-screen z-[1] text-[#ffffff26] top-1/2 text-center font-bold">403</h2>
    <div class="noAuthenticationInfo relative top-1/2 mt-0 mb-0 ml-auto mr-auto z-[3] w-[70vw]">
      <p class="text-white mb-5 leading-[1.2] text-[17px]">
        &gt; <span class="text-[#f0c674]">ERROR CODE</span>: "
        <i class="not-italic text-[#8abeb7]">HTTP 403 Forbidden</i>"
      </p>
      <p class="text-white mb-5 leading-[1.2] text-[17px]">
        &gt; <span class="text-[#f0c674]">ERROR DESCRIPTION</span>: "
        <i class="not-italic text-[#8abeb7]">Access Denied. You Do Not Have The Permission To Access This Page On This Server</i>"
      </p>
      <p class="text-white mb-5 leading-[1.2] text-[17px]">
        &gt; <span class="text-[#f0c674]">ERROR POSSIBLY CAUSED BY</span>:
        [<span class="text-[#8abeb7] text-justify">execute access forbidden, read access forbidden, write access forbidden, ssl required, ssl 128 required, ip address rejected, client certificate required, site access denied, too many users, invalid configuration, password change, mapper denied access, client certificate revoked, directory listing denied, client access licenses exceeded, client certificate is untrusted or invalid, client certificate has expired or is not yet valid, passport logon failed, source access denied, infinite depth is denied, too many requests from the same client ip</span>...]
      </p>
      <p class="text-white mb-5 leading-[1.2] text-[17px]">
        &gt;<span class="text-[#f0c674]"> HAVE A NICE DAY SIR AXLEROD :-)</span>
      </p>
      <div class="relative w-full text-center mb-5">
        <a href="/">
          <a-button type="primary">返回首页</a-button>
        </a>
      </div>
    </div>
  </section>
</template>

<style scoped lang="less">
.noAuthentication {
  background-image: linear-gradient(120deg, #4f0088 0%, #000000 100%);
}

.noAuthentication h2 {
  text-shadow: 0 0 50px rgba(0, 0, 0, 0.07);
  transform: translateY(-50%);
}

.noAuthenticationInfo {
  background: rgba(0, 0, 0, 0);
  transform: translateY(-50%);
  padding: 30px 30px 10px;
  box-shadow: 0 0 150px -20px rgba(0, 0, 0, 0.5);
}
</style>
